import { defineComponent, h } from 'vue';
import { windUserOperate } from '@/pages/MainMenu/User/WindUser/WindUserOperate';
import { createOperateActions, TableColumnConfig } from '@/util/vnode_create_util/dynamic_table_column_creator';
import { OperateButton, WindUser } from '@/global';
import { PageCommonDatatable, PageCommonPagination } from '@/pages/MainMenu/CommonComponents';
// wind用户
const operateButtons: OperateButton<WindUser>[] = [
  {
    title: '详情',
    action: async (scope) => {},
    isShow: () => true
  },
  { title: '编辑', action: () => {}, isShow: () => true },
  { title: '提审', action: () => {}, isShow: () => true },
  { title: '导出', action: () => {}, isShow: () => true },
  { title: '删除', action: () => {}, isShow: () => true }
];

// 三年审核计划的列表组成配置参数
export const windUserColumn: TableColumnConfig<WindUser>[] = [
  { label: '昵称', width: '60px', dom: scope => <span>{scope.row.userNickName}</span> },
  { label: '邮箱', width: '60px', dom: scope => <span>{scope.row.userEmail}</span> },
  { label: '性别', width: '60px', dom: scope => <span>{scope.row.userSexText}</span> },
  { label: '等级', width: '60px', dom: scope => <span>{scope.row.userLevel}</span> },
  { label: '真实姓名', width: '120px', dom: scope => <span>{scope.row.userRealName}</span> },
  { label: '手机号', width: '200px', dom: scope => <span>{scope.row.userMobile}</span> },
  { label: '用户状态', dom: scope => <span>{scope.row.userStatusText}</span> },
  { label: '操作', width: '160px', fixed: 'right', dom: scope => <div>{createOperateActions(operateButtons, scope)}</div> }
];

export default defineComponent({
  name: 'WindUserList',
  setup () {
    const userReactive = windUserOperate();
    return () => <div>
      <PageCommonDatatable data={userReactive.dataList} loading={userReactive.tableLoading}
                           defineColumns={windUserColumn}></PageCommonDatatable>
      <PageCommonPagination page={userReactive.page}></PageCommonPagination>
    </div>;
  }
});
